<template>
  <div>
    <div class="j-word-cloud" :style="'min-height:' + height + 'px;width:' + width + 'px;'">
      <span v-for="(item, index) in showTextList" :id="'word-' + index" :key="index" :style="getStyle(item, index)">
        {{ item.text }}
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue';
const prop = defineProps({
  textList: {
    type: Array,
    default: () => {
      return [

      ];
    }
  },
  width: {
    type: Number,
    default: 300
  },
  colorList: {
    type: Array,
    default: () => []
  },
  baseSize: {
    type: Number,
    default: 0.3
  },
  maxSize: {
    type: Number,
    default: 0.5
  },
  minSize: {
    type: Number,
    default: 0.1
  },
  transformDeg: {
    type: Array,
    default: () => {
      return [-10, 10];
    }
  }
});
const maxFreq = ref(0);
const minFreq = ref(0);
const showTextList = ref([]);
const pointList = ref([]);
const height = ref(300);
function init() {
  initData();
  comShowtexList();
  getFourPoints();
}
//组合样式
function getStyle(item: { size: string; text: string | any[]; point: { y: number; x: number; }; color: string; },) {
  const heights = parseFloat(item.size) * 1;
  const width = parseFloat(item.size) * 1 * item.text.length;
  let res = '';
  res += 'font-size:' + item.size + ';';
  res += 'position: absolute;';
  res += 'float: left;';
  res +=
    'top:' +
    Math.max(0, Math.min(item.point.y, prop.width - width - 20)) +
    'px;';
  res +=
    'left:' +
    Math.max(0, Math.min(item.point.x, height.value - heights - 20)) +
    'px;';
  res += 'color:' + item.color + ';';
  // res += "transform:rotate(" + item.deg + "deg);";
  return res;
}
//随机获取坐标
function getRandomPoint() {
  const width = prop.width;
  const heights = height.value;
  const x = getRandomNum(0, width - 20),
    y = getRandomNum(0, heights - 20);
  return { x: x, y: y };
}
//随机获取颜色
function getRandomColor() {
  let res = 'rgb(';
  res += getRandomNum(0, 255) + ',';
  res += getRandomNum(0, 255) + ',';
  res += getRandomNum(0, 255) + ')';
  return res;
}
//随机获取角度
function getRandomdeg() {
  let res = '';
  res += getRandomNum(
    prop.transformDeg[0],
    prop.transformDeg[1]
  );
  return res;
}
//获取随机数
function getRandomNum(minN: unknown, maxN: unknown) {
  return Math.floor(Math.random() * (maxN - minN + 1) + minN);
}
//初始化
function initData() {
  const textList = prop.textList;
  console.log(textList,'textList');
  let maxF = textList[0].freq,
    minF = textList[0].freq;
  textList.map(item => {
    maxF = Math.max(maxF, item.freq);
    minF = Math.min(minF, item.freq);
  });
  maxFreq.value = maxF;
  minFreq.value = minF;
}
//通过词频计算字体大小
function getSize(freq) {
  const baseSize = (prop.maxSize + prop.minSize) / 2;
  const addSize =
    (prop.maxSize - prop.minSize) * (freq - minFreq.value) /
    (maxFreq.value - minFreq.value);
  return (
    (prop.minSize + addSize) / baseSize * baseSize + 'rem'
  );
}
//获取四个顶点坐标
function getFourPoints() {
  nextTick(() => {
    const showTextLists = showTextList.value;
    let newHeight = 0;
    for (let i = 0; i < showTextLists.length; i++) {
      const id = 'word-' + i;
      const dom = document.getElementById(id);
      const tl = { x: dom.offsetLeft, y: dom.offsetTop };
      const tr = {
        x: dom.offsetLeft + dom.offsetWidth,
        y: dom.offsetTop
      };
      const bl = {
        x: dom.offsetLeft,
        y: dom.offsetTop + dom.offsetHeight
      };
      const br = {
        x: dom.offsetLeft + dom.offsetWidth,
        y: dom.offsetTop
      };
      newHeight = Math.max(newHeight, bl.y);
      showTextLists[i].fourPoints = {
        tl: tl,
        tr: tr,
        bl: bl,
        br: br
      };
    }
    height.value = newHeight;
  });
}
//组装显示列表属性数据
function comShowtexList() {
  let showTextLists = [];
  prop.textList.map(item => {
    const temp = item;
    temp.size = getSize(item.freq);
    const point = getRandomPoint();
    const color = getRandomColor();
    const deg = getRandomdeg();
    pointList.value.push(point);
    temp.point = point;
    temp.color = color;
    temp.deg = deg;
    showTextLists.push(temp);
  });
  showTextLists = showTextLists.sort(() => {
    return 0.5 - Math.random();
  });
  showTextList.value = showTextLists;
  console.log(showTextLists,'词云');
}
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.j-word-cloud {
  border: 1px solid black;
  position: relative;

  span {
    transform-origin: 0 0;
    padding: 0.1rem;
    margin: 0 auto;
  }
}
</style>

